<template>
  <div>
    <a-page-header :ghost="false" title="我的班级/MY CLASS" />
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      提示:创建班级之后会生成一个班级邀请码，该邀请码需要学生在"个人设置"-"账号绑定"下进行班级绑定
    </a-card>
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <a-card :bordered="false">
        <a-row :gutter="16">
          <a-col :span="20">
            <a-form-model layout="inline">
              <a-form-model-item label="班级名称">
                <a-input placeholder="请输入班级名称" v-model="className" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="findClass">
                  搜索
                </a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="resetSearch">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
          <a-col :span="4">
            <a-form-model layout="inline">
              <a-form-model-item>
                <a-button
                  type="primary"
                  @click="showCreateClassModal"
                  style="width: 100px;"
                >
                  创建班级
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
        </a-row>
      </a-card>
      <a-table
        style="margin-top: 16px;"
        :columns="columnsClass"
        :data-source="dataClass"
        rowKey="id"
      >
        <span slot="name" slot-scope="text">{{ text }}</span>
        <span slot="questionTitle">班级名称</span>
        <!-- 是否禁止加入 -->
        <span slot="tagsInBan" slot-scope="tags">
          <a-tag :color="tags === 0 ? 'volcano' : 'green'">
            {{ tags === 1 ? "YES" : "NO" }}
          </a-tag>
        </span>
        <!-- 是否允许退出 -->
        <span slot="tagsInQuit" slot-scope="tags">
          <a-tag :color="tags === 0 ? 'volcano' : 'green'">
            {{ tags === 1 ? "YES" : "NO" }}
          </a-tag>
        </span>
        <template slot="action" slot-scope="text, record">
          <span slot="action">
            <a @click="showCheckStudentModal(record)">查看</a>
            <a-divider type="vertical" />
            <a @click="showModifyClassModel(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确认删除此班级?"
              ok-text="确定删除"
              cancel-text="取消"
              @confirm="delClass(record)"
            >
              <a style="color: #FF4D4F;">删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-card>

    <!-- 创建班级Model -->
    <a-modal
      v-model="createClassModelVisible"
      title="创建班级"
      @ok="createClassPost"
      okText="确定"
      cancelText="取消"
      :maskClosable="false"
    >
      <a-form-model layout="inline">
        <a-card title="基础信息">
          <a-form-model-item label="班级名称">
            <a-input
              placeholder="请输入班级名称"
              v-model="createClassFrom.name"
            />
          </a-form-model-item>
        </a-card>
        <a-card title="设置" style="margin-top: 16px;">
          <a-form-model-item label="是否禁止加入">
            <a-switch default-checked @change="onChangeJoin">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
          <a-form-model-item label="是否允许退出">
            <a-switch default-checked @change="onChangeQuit">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
        </a-card>
      </a-form-model>
    </a-modal>
    <!-- 查看班级学生Model -->
    <a-modal
      v-model="checkStudentsModelVisible"
      title="班级成员"
      :maskClosable="false"
      @cancel="getInfo"
      :footer="null"
      :destroyOnClose="true"
      :width="1080"
    >
      <showMyStudentComponents
        :classId="classId"
        :classCount="classCount"
      ></showMyStudentComponents>
    </a-modal>
    <!-- 修改班级Model -->
    <a-modal
      v-model="modifyClassModelVisible"
      title="编辑班级"
      @ok="modifyClassPost"
      okText="确定"
      cancelText="取消"
      :maskClosable="false"
    >
      <a-form-model layout="inline">
        <a-card title="基础信息">
          <a-form-model-item label="班级名称">
            <a-input
              placeholder="请输入班级名称"
              v-model="createClassFrom.name"
            />
          </a-form-model-item>
        </a-card>
        <a-card title="设置" style="margin-top: 16px;">
          <a-form-model-item label="是否禁止加入">
            <a-switch
              :checked="createClassFrom.isJoin == 1 ? true : false"
              @change="onChangeJoin"
            >
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
          <a-form-model-item label="是否允许退出">
            <a-switch
              :checked="createClassFrom.isQuit == 1 ? true : false"
              @change="onChangeQuit"
            >
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
        </a-card>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import showMyStudentComponents from "../Class/showMyClassMember";
const columnsClass = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "questionTitle" },
    scopedSlots: { customRender: "name" },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: "加入人数",
    dataIndex: "count",
    align: "center",
    key: "count",
    sorter: (a, b) => a.count - b.count
  },
  {
    title: "是否禁止加入",
    dataIndex: "isJoin",
    align: "center",
    key: "isJoin",
    scopedSlots: { customRender: "tagsInBan" }
  },
  {
    title: "是否允许退出",
    dataIndex: "isQuit",
    align: "center",
    key: "isQuit",
    scopedSlots: { customRender: "tagsInQuit" }
  },
  {
    title: "班级邀请码",
    align: "center",
    dataIndex: "id",
    key: "id"
  },
  {
    align: "center",
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  components: {
    showMyStudentComponents
  },
  data() {
    return {
      dataClass: [],
      columnsClass,
      createClassFrom: {
        name: "",
        isJoin: 1,
        isQuit: 1
      },
      createClassModelVisible: false,
      checkStudentsModelVisible: false,
      modifyClassModelVisible: false,
      classId: 10,
      classCount: 0,
      className: "",
      modifyClassId: 0
    };
  },
  methods: {
    showCreateClassModal() {
      this.createClassModelVisible = true;
    },
    createClassPost(e) {
      console.log(e);
      console.log(this.createClassFrom);
      this.$axios
        .post("/create/class", this.createClassFrom, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.createClassFrom.name = "";
            this.createClassFrom.isJoin = 1;
            this.createClassFrom.isQuit = 1;
            this.$message.success(res.data.msg);
            this.getInfo();
            this.createClassModelVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    onChangeJoin(checked) {
      console.log(checked);
      if (checked) this.createClassFrom.isJoin = 1;
      else this.createClassFrom.isJoin = 0;
      // console.log(this.createClassFrom.isJoin);
    },
    onChangeQuit(checked) {
      if (checked) this.createClassFrom.isQuit = 1;
      else this.createClassFrom.isQuit = 0;
      // console.log(this.createClassFrom.isQuit);
    },
    // 查看班级学生
    showCheckStudentModal(record) {
      console.log(record.id);
      this.classId = record.id;
      this.classCount = record.count;
      this.checkStudentsModelVisible = true;
    },
    // 获取班级基础信息
    getInfo() {
      // 获取班级信息
      this.$axios
        .get("/get/class/noPage", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.dataClass = res.data.data;
            for (let i in res.data.data) {
              Object.assign(this.dataClass[i], { key: i + 1 });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 删除班级
    delClass(record) {
      // 班级id
      console.log(record.id);
      this.$axios
        .delete("/delete/classInfo/" + record.id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.getInfo();
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 模糊查找班级
    findClass() {
      if (this.className.replace(/(^s*)|(s*$)/g, "").length == 0) {
        this.getInfo();
        return;
      }
      this.$axios
        .get("/find/class/" + this.className, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.dataClass = res.data.data;
            for (let i in res.data.data) {
              Object.assign(this.dataClass[i], { key: i + 1 });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 重置搜索
    resetSearch() {
      this.className = "";
      this.getInfo();
    },
    // 展示修改model
    showModifyClassModel(record) {
      this.modifyClassId = record.id;
      console.log(record.id);
      // 更新数据
      this.createClassFrom.name = record.name;
      this.createClassFrom.isJoin = record.isJoin;
      this.createClassFrom.isQuit = record.isQuit;
      // 展示model
      this.modifyClassModelVisible = true;
    },
    // 修改班级信息
    modifyClassPost() {
      this.$axios
        .post("/modify/class/" + this.modifyClassId, this.createClassFrom, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.getInfo();
            this.modifyClassModelVisible = false;
            this.createClassFrom.name = "";
            this.createClassFrom.isJoin = 1;
            this.createClassFrom.isQuit = 1;
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped></style>
